<template>
  <ul class="myMenu_wrap" @click="toggle">
    <li 
        v-for="(menu,index) in props.menuData" 
        :data-index="index" 
        :key="menu.tag"
        :data-tag="menu.tag"
        :style="(currentIndex === index) && `background-color:rgb(40 93 158)`"
        >{{ menu.lable }}</li>
  </ul>
</template>

<script setup lang="ts">
   import {ref,onMounted} from 'vue'
   const props = defineProps(['menuData']) 
   const emits = defineEmits(['emitTag'])
   const currentIndex = ref(0)

   onMounted(()=>{
    emits('emitTag',props.menuData[0].tag)
   })

   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const toggle = (e:any)=>{
       const text =e.target.dataset.tag
       const index =e.target.dataset.index
       currentIndex.value = index*1 
       if(text){
        emits('emitTag',text)
       }
    }

</script>

<style scoped lang="scss">

    .myMenu_wrap{
        display: flex;
        background-color: #34383c;
        overflow-x: auto;
        
        li{
        box-sizing: border-box;
        padding: 10px 5px;
        min-width: 125px;
        max-width: 100px;
        }
    }
   
    .myMenu_wrap>*{
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
</style>
